<script setup lang="ts">
import { getexportFcFile, getFcOldOrderList } from "@/api/wuliu";
import OrderMx from "@/components/OrderMx/OrderMx.vue";
import { useDriveCarList } from "@/hooks/useDriveCarList";
import { Refresh, Search } from "@element-plus/icons-vue";
import printJS from "print-js";
const { listLoading, listData, refreshListData } = useDriveCarList();

const detailData = ref<any>();
const detailVisible = ref(false);
const detailLoading = ref(false);
const orderMxRef = ref<InstanceType<typeof OrderMx>>();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

async function openDetail(item: any) {
  try {
    detailLoading.value = true;
    const { id } = item;
    const { data } = await getFcOldOrderList({
      driveCarId: id,
      pageNum: 1,
      pageSize: 1000,
    });
    detailVisible.value = true;
    detailData.value = data;
    console.log("Detail", data);
  } catch (error) {
    detailData.value = undefined;
    console.error("error get fc old order list", error);
  } finally {
    detailLoading.value = false;
  }
}

function openMx(item: any) {
  console.log("Mx", item.wareDocMxVoList);
  orderMxRef.value?.handleOpen(item.wareDocMxVoList);
}
/** 导出按钮操作 */
const handleExportForId = async (id: string) => {
  let result = await getexportFcFile(id);
  let { data } = result;
  let filter_data = [];
  for (let k of data.fcexcelVOList) {
    for (let key in k) {
      if (!k[key]) {
        k[key] = "";
      }
    }
  }
  data?.fcexcelVOList.push({
    id: "总计",
    fhf: `列表数量:`,
    shc: data?.lbsum,
    jc: `${data?.jssum}件`,
    tj: data?.tjsum,
    yj: data?.yjsum,
    xj: data?.xjsum,
    tf: data?.tfsum,
    zyf: data?.zyfsum,
    bz: "",
  });
  printJS({
    printable: data?.fcexcelVOList,
    header: `
    <h3 class="custom-h3">${data?.title}</h3>
    <div class="cephalosome">
        <span>运行区间：${data?.ycqj}</span>
        <span>发车时间：${data?.fcsj}</span>
        <span>发车批次：${data?.fcpc}</span>
        <span>车牌号码：${data?.cphm}</span>
        <span>司机名称：${data?.sjmc}</span>
        <span>联系方式：${data?.lxfs}</span>
    </div>
    `,
    style: `.custom-h3 { color: #000000;text-align:center;width: 100%;font-size:36px;font-weight:normal;}
      .cephalosome{ display:grid;grid-template-columns:repeat(3,1fr);white-space:nowrap;}
      .cephalosome span{border:1px solid #d3d3d3;text-align:center;}
      `,
    gridStyle: "border: 1px solid #d3d3d3;text-align:center;white-space:nowrap;",
    type: "json",

    properties: [
      { field: "id", displayName: "序号" },
      { field: "fhf", displayName: "发货方" },
      { field: "shc", displayName: "收货方" },
      { field: "jc", displayName: "件数" },
      { field: "tj", displayName: "体积" },
      { field: "yj", displayName: "月结" },
      { field: "xj", displayName: "现金" },
      { field: "tf", displayName: "提付" },
      { field: "zyf", displayName: "总运费" },
      { field: "bz", displayName: "备注" },
    ],
  });
};
</script>

<template>
  <div class="app-container yi-fa-che">
    <div class="header">
      <div class="header-filter"></div>

      <div class="header-actions">
        <el-tooltip content="刷新">
          <el-button :icon="Refresh" circle @click="refreshListData" />
        </el-tooltip>
      </div>
    </div>

    <el-table v-loading="listLoading" :data="listData" stripe>
      <el-table-column label="总件数" prop="customSum">
        <template #default="{ row }"> {{ row.customSum }}件 </template>
      </el-table-column>
      <el-table-column label="总运费">
        <template #default="{ row }"> ￥{{ row.priceSum }} </template>
      </el-table-column>
      <el-table-column label="司机" prop="driverName" />
      <el-table-column label="发车人" prop="dispatchCarName" />
      <el-table-column label="发车时间" prop="dispatchCarTime" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" size="small" text @click="handleExportForId(row.id)"
            >导出</el-button
          >
          <el-button
            :icon="Search"
            type="primary"
            size="small"
            text
            @click="openDetail(row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer v-model="detailVisible" title="订单信息" direction="rtl" size="60%">
      <el-table v-loading="detailLoading" :data="detailData">
        <el-table-column prop="postName" label="报单公司" />
        <el-table-column prop="bdrmc" label="报单人" />
        <el-table-column label="件数" prop="articleSum">
          <template #default="{ row }"> {{ row.articleSum }}件 </template>
        </el-table-column>
        <el-table-column prop="priceSum" label="总运费">
          <template #default="{ row }"> ￥{{ row.priceSum }} </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              :icon="Search"
              type="primary"
              size="small"
              text
              @click="openMx(row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

    <OrderMx ref="orderMxRef" />
  </div>
</template>

<style lang="scss">
.yi-fa-che {
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .header-filter {
      flex: 1 0 0;
    }

    .header-actions {
      flex: 0 0 auto;
    }
  }
}
</style>
